<template>
    <div class="content">
        <div class="content-list">
            <div class="chat-title">
                <div class="chat-name">
                   <!-- <p>{{chatObject.name}}</p>-->
                    <p>{{chatObject.remark}}</p>
                </div>
            </div>
            <div class="chat-content" id="chat-content">
                <p class="more" v-if="hasMoreDataFlag" >
                    <span @click="lookMoreList"> 查看更多</span>
                </p>
                <ul>
                   <!-- //messageDirection消息方向，1 为发送的消息、2 为接收的消息。&lt;!&ndash;&ndash;&gt;-->
                    <li class="item" v-for="item in chatContent"  v-if="chatContent.length>0">
                        <p class="send-time">{{item.sentTime | timeFilter}}</p>
                        <div class="chat-item" v-if="item.messageDirection === 2">
                            <div class="chat-pic">
                                <img :src="chatObject.portraitUri"   alt="">
                            </div>
                            <div class="chat-detail" v-if="item.objectName === 'RC:TxtMsg'">
                                <div class="chat-name">{{chatObject.name}}</div>
                                <p class="detail"><span v-html="item.content.content"></span></p>
                                <span class="el-icon-warning" v-if="item.sentStatus === 20"></span><span
                                    class="el-icon-loading" v-if="item.sentStatus === 10"></span>
                            </div>
                            <div class="chat-detail" v-if="item.objectName === 'RC:ImgMsg'">
                                <div class="chat-name">{{chatObject.name}}</div>
                                <div class="chat-pic" style="width: 0;margin-right:30px">
                                    <img class="pic" :src="item.content.content" alt="" @click="clickImg(item)" ></div>
                                <span class="el-icon-warning" v-if="item.sentStatus === 20"></span><span
                                    class="el-icon-loading" v-if="item.sentStatus === 10"></span>
                            </div>
                            <div class="chat-detail"  v-if="item.objectName === 'RC:FileMsg'">
                                <div class="chat-name">{{chatObject.name}}</div>
                                <a :href="item.content.fileUrl">
                                    <div class="chat-file">
                                        <div class="file-icon">{{item.content.name | getFileType}}</div>
                                        <div class="file-name">{{item.content.name}}</div>
                                        <div class="file-name">{{item.content.size+'K'}}</div>
                                    </div>
                                </a>

                            </div>
                            <div class="chat-detail" v-if="item.objectName === 'TT:CustomMsg'">
                                <div class="chat-inquiry"  >
                                    <router-link to="/app/chatPage/fixCode">
                                        <div class="inquiry-infor">
                                            <div class="inquiry-infor-left">
                                                <img src="./../assets/images/aptoto.png" alt="">
                                            </div>
                                            <div class="inquiry-infor-right">
                                                <div class="title">
                                                    需求单：qxd123123123123
                                                </div>
                                                <div class="subTitle">
                                                    下单时间：2016-10-24 10:24:34
                                                </div>
                                                <div class="car-type">
                                                    <span>VIN码：</span>QWEQEQEQ123123123
                                                </div>
                                                <div class="car-type">
                                                    <span>车型：</span>丰田丰田丰田丰田丰田丰田丰田丰田丰田
                                                </div>

                                            </div>
                                        </div>
                                        <div class="operate-inquiry">查看询价单</div>
                                    </router-link>

                                </div>
                            </div>


                        </div>
                        <div class="chat-item-right"  v-if="item.messageDirection === 1">
                            <div class="chat-pic">
                                <img :src="personInfor.portraitUri" v-if="personInfor.portraitUri !=''"
                                     alt="">
                            </div>
                            <div class="chat-detail" >
                                <div class="chat-name">{{personInfor.name}} </div>
                                <div class="detail" v-if="item.objectName === 'RC:TxtMsg'">
                                    <span v-html="item.content.content"></span>
                                </div>
                                <div class="chat-pic" v-if="item.objectName === 'RC:ImgMsg'">
                                    <img @click="clickImg(item)" class="pic"  :src="item.content.content " alt="">
                                </div>
                                <a :href="item.content.fileUrl"   v-if="item.objectName === 'RC:FileMsg'">
                                    <div class="chat-file">
                                        <div class="file-icon">{{item.content.name | getFileType}}</div>
                                        <div class="file-name">{{item.content.name}}</div>
                                        <div class="file-name">{{item.content.size+'K'}}</div>
                                    </div>
                                </a>

                                    <div class="chat-inquiry"  v-if="item.objectName === 'TT:CustomMsg'">
                                        <router-link to="/app/chatPage/inquiry">
                                            <div class="inquiry-infor">
                                                <div class="inquiry-infor-left">
                                                    <img src="./../assets/images/aptoto.png" alt="">
                                                </div>
                                                <div class="inquiry-infor-right">
                                                    <div class="title">
                                                        需求单：qxd123123123123
                                                    </div>
                                                    <div class="subTitle">
                                                        下单时间：2016-10-24 10:24:34
                                                    </div>
                                                    <div class="car-type">
                                                        <span>VIN码：</span>QWEQEQEQ123123123
                                                    </div>
                                                    <div class="car-type">
                                                        <span>车型：</span>丰田丰田丰田丰田丰田丰田丰田丰田丰田
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="operate-inquiry">查看询价单</div>
                                        </router-link>

                                    </div>


                                <span class="el-icon-warning" v-if="item.sentStatus === 20"></span><span
                                    class="el-icon-loading" v-if="item.sentStatus === 10"></span>
                            </div>
                        </div>
                    </li>
<!--
                    <li class="item">
                        <p class="send-time">2015-2-10 20:20</p>
                        <div class="chat-item">
                            <div class="chat-pic">
                                <img src="./../assets/images/textpic.jpg" alt="">
                            </div>
                            <div class="chat-detail">
                                <div class="chat-name">蔡志远 15367268765</div>
                                <div class="chat-file">
                                    <div class="file-icon">PDF</div>
                                    <div class="file-name">淘汽配管家对外开淘汽配管家对外开淘<span>.PDF</span></div>

                                </div>
                                <span class="el-icon-warning"></span> <span class="el-icon-loading" ></span>
                            </div>
                        </div>
                    </li>
                    <li class="item">
                        <p class="send-time">2015-2-10 20:20</p>
                        <div class="chat-item-right">
                            <div class="chat-pic">
                                <img src="./../assets/images/textpic.jpg" alt="">
                            </div>
                            <div class="chat-detail">
                                <div class="chat-name">蔡志远 15367268765</div>
                                <div class="chat-file">
                                    <div class="file-icon">PDF</div>
                                    <div class="file-name">淘汽配管家对外开淘汽配管家对外开淘<span>.PDF</span></div>
                                </div>
                                <span class="el-icon-warning"></span> <span class="el-icon-loading"></span>
                            </div>
                        </div>
                    </li>
                    &lt;!&ndash;//messageDirection消息方向，1 为发送的消息、2 为接收的消息。&ndash;&gt;
                   <li class="item" v-for="item in chatContent" v-if="item.messageDirection === 1">
                        <p class="send-time">{{item.sentTime | timeFilter}}</p>
                        <div class="chat-item-right">
                                <div class="chat-pic">
                                    <img :src="personInfor.portraitUri" v-if="personInfor.portraitUri !=''"
                                         alt="">
                                </div>
                                <div class="chat-detail" >
                                    <div class="chat-name">{{personInfor.name}} 15367268765</div>
                                    <div class="detail" v-if="item.objectName === 'RC:TxtMsg'">
                                        <span v-html="item.content.content"></span>
                                    </div>
                                    <div class="chat-pic" v-if="item.objectName === 'RC:ImgMsg'">
                                        <img @click="clickImg" class="pic"  src="./../assets/images/textpic.jpg" alt="">
                                    </div>
                                    <span class="el-icon-warning" v-if="item.sentStatus === 20"></span><span
                                        class="el-icon-loading" v-if="item.sentStatus === 10"></span>
                                </div>
                            </div>-->
                   </li>

                    <!--<li class="item" v-for="item in chatContent"  v-if="item.conversationType === 1">
                        <p class="send-time">{{item.sentTime}}</p>
                        <div class="chat-item-right">
                          <div class="chat-pic">
                                <img  :src="item.content.extra.portraitUri" v-if="item.content.extra.portraitUri !=''" alt="">
                            </div>
                            <div class="chat-detail" v-if="item.objectName === 'RC:TxtMsg'">
                                <div class="chat-name">{{item.content.extra.name}} 15367268765</div>
                                <div class="detail">
                                    {{item.content.content}}
                                </div>
                                <span class="el-icon-warning" v-if="item.sentStatus === 20"></span><span class="el-icon-loading" v-if="item.sentStatus === 10"></span>
                            </div>
                        </div>
                    </li>-->
                </ul>
            </div>
        </div>
        <div class="operate">
            <emoji @selectEmoji ="selectEmoji" ref="emoji"></emoji>
            <div class="left">
                <img src="./../assets/images/emoij.png"  class="emoij" alt="" @click="showEmoji">
                <img src="./../assets/images/icon_upload.png"  class="uploadImg" alt="">
                <input type="file" class="file" id="file" @change="handleFileChange">

            </div>
            <div class="right">
                <p class="key-infor">按Enter键发送，CTRL+Enter换行</p>
            </div>
        </div>
        <div class="send-message">
            <div class="input" :contenteditable="contenteditable" placeholder="请输入文字" @drop="drop($event)" @dragenter="dragenter($event)" id="areaInput"
                 @dragover="dragover($event)" ref="content" @keydown="sendContent">
            </div>
            <div class="blank-message" v-if="blankFlag">
                <span>不能发送空白消息</span>
                <span class="el-icon-caret-bottom"></span>
            </div>
            <span class="send" @click="sendMessage">发送</span>
        </div>
        <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
       <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>-->

        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="25%"
                :before-close="handleClose">
            <div class="modal-img">
                <img :src="modalImg" alt="">
            </div>
           <!-- <div class="drop-file">
                <div class="file">
                    <div class="file-left">{{drapFile.type}}</div>
                    <div class="file-right">
                        <p class="file-name ">{{drapFile.name}}</p>
                        <p class="file-size">{{drapFile.size}}</p>
                    </div>
                </div>
            </div>-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" style="width: 48%">取 消</el-button>
                <el-button type="primary" @click="sendPastePic" style="width: 48%">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
  import BigImg from '@/components/BigImg.vue';
  import Emoji from '@/components/Emoji.vue'
  import Http from './../http/chatApiHttp'
  import RonrIM from './../service/RoneIM -Service'
  import Message from './../service/Message-Service'
  import File  from './../service/File-service'
  import _Util from './../utils/util.class'
  import User from './../service/User-Service'
  import TTmessage from './../service/TTmessage'
  import RongPackMessage from './../service/RongPackMessage'

  import  $ from  'jquery'
  const _RonrIM = new RonrIM();
  const _Message = new Message();
  const _File = new File();
  const  _User = new User();

  export default {
    components: {
      BigImg,
      Emoji
    },
    data () {
      return {
        showImg: false,
        imgSrc: '',
        chatObject: this.$store.state.chatObject,
        blankFlag: false,
        contenteditable: true,
        code: this.$util.getQueryString('code'),
        fileData: [],
        picureData: [],
        uploadDataFiles: [],
        extra: {},
        chatContent: this.$store.state.chatContent,
        personInfor: {},
        sendData: [],
        params: {
          code: this.$util.getQueryString('code')
        },
        hasMoreDataFlag: false,
        modalImg: '',
        dialogVisible: false,
        title:'提示'
      }
    },
    created () {
       this.getUserDetail();

    },
    mounted(){
      this.$nextTick(()=>{
        this._pasteInit();
      })
    },
    computed: {
      changeChatObject () {
        return this.$store.state.chatObject;
      },
      getChatContent(){
        return this.$store.state.chatContent;
      }
    },
    watch: {
      getChatContent:function(chatContent,oldChatContent){
        this.chatContent = chatContent;
        console.log(this.chatContent)
      },
      changeChatObject: function (chatObject, b) {
        this.chatObject = chatObject;
        this.targetId =chatObject.code;
        console.log(this.targetId)
        this.chatDataInit();
      },
      chatContent:function () {
        this._scrollBottom()

      }
    },
    methods: {
      _scrollBottom(){
        this.$nextTick(() => {
          let container = this.$el.querySelector("#chat-content");
          container.scrollTop = container.scrollHeight;
        })

      },
      _getHistoryMessages(timestrap=null){
        //messageDirection消息方向，1 为发送的消息、2 为接收的消息。
       _RonrIM.getHistoryMessages(this.targetId,this.pageSzie,timestrap).then((data)=>{
          data.list.forEach(item=>{
            item.content.content = item.content.content ? RongIMLib.RongIMEmoji.emojiToHTML(item.content.content) :'';

          })
          if(data.hasMsg){
            this.hasMoreDataFlag = true;
          }else {
            this.hasMoreDataFlag = false;
          }
         this.$store.dispatch('changeChatContent',data.list);
            this._scrollBottom();
        })
      },
      handleClose(done) {
        this.$confirm('确认取消发送？').then(_ => {
              done();
            })
            .catch(_ => {});
      },
      getUserDetail(){
        _User.getUserDetail(this.params).then((data)=>{
          this.personInfor = {
            portraitUri:data.portraitUri,
            name:data.name,
            remark:data.remark
          };
          this.$store.dispatch('changePersonInfor',this.personInfor);
        })
      },
      chatDataInit(){
        this.$store.dispatch('changeChatContent',[]);
        this.hasMoreDataFlag = false;
        this.pageSzie = 10;
        this._getHistoryMessages(0);
        this.$refs.content.innerHTML ='';
        $("#file").val('');
        $("#areaInput").focus();

      },
      lookMoreList(){
        this._getHistoryMessages();
      },
      sendContent(e){
        if(e.ctrlKey && e.keyCode===13) {
          if (this.$util.browserType() === "IE" || this.$util.browserType() === "Edge") {
            $("#areaInput").append("<div></div>");
          }
          else if (this.$util.browserType() === "FF") {
            $("#areaInput").append("<br/><br/>");
          } else {
            $("#areaInput").append("<div><br/></div>");
          }
          //设置输入焦点
          let o = document.getElementById("areaInput").lastChild;
          let textbox = document.getElementById('areaInput');
          let sel = window.getSelection();
          let range = document.createRange();
          range.selectNodeContents(textbox);
          range.collapse(false);
          range.setEndAfter(o);//
          range.setStartAfter(o);//
          sel.removeAllRanges();
          sel.addRange(range);
          return false
        }
        if (e.keyCode === 13) {
         // console.log($("#areaInput").text())
          this.sendMessage();
          e.preventDefault();
          return false
        }
      },
      sendMessage () {
        this.sendTextMessage();
      },
      //发送文件消息
      sendTextMessage(){
        let content = this.$refs.content.innerHTML;
        let msg = $("#areaInput").text();
        if (_Util.isEmptyStr(msg)){
          this.blankFlag = true;
          setTimeout(()=>{
            this.blankFlag = false;
          },2000);
          return
        }
        let msgType ='RC:TxtMsg';
        this.sendMessageContent(content,msgType)

      },
      sendMessageContent(content,msgType,name,size,imageUri,number,title,subTitle,imgUrl,summary,customType,btnTxt,enable){
        let  contentItem =  RongIMLib.RongIMEmoji.symbolToEmoji(content); //发送消息时，消息体里必须使用原生 Emoji 字符
        let params = new  TTmessage(this.code,this.targetId,contentItem,msgType,name,size,imageUri,number,title,subTitle,imgUrl,summary,customType,btnTxt,enable);
        let contentContent =  RongIMLib.RongIMEmoji.symbolToHTML(content);
        console.log(contentContent)
        let rongPackMessage = new RongPackMessage(contentContent,msgType,name,size,imageUri,number,title,subTitle,imgUrl,summary,customType,btnTxt,enable);
        this.chatContent.push(rongPackMessage);
        _Message.sendMessage(params).then((res) => {

        //10 发送中 ，20 发送失败 30 发送成功
          if(res.code===200){
            rongPackMessage.sentStatus = 30;
          }else{
            rongPackMessage.sentStatus = 20;
          }
          this.$refs.content.innerHTML ='';
          //更新左侧列表内容
          this._upDateUserList(rongPackMessage);
        })
      },
      //更新左侧列表内容
      _upDateUserList(rongPackMessage){
        let userList = this.$store.state.chatList;
        for(let i = 0;i<userList.length;i++){
          let userInfor = userList[i];
          //更新左侧用户列表数据
          if(userInfor.code === this.targetId){
            userInfor.content = rongPackMessage.content.content;
            userInfor.sendTime = rongPackMessage.sentTime;
            userInfor.msgType = rongPackMessage.objectName;
            break
          }
        }

        this.$store.dispatch('changeUserList',userList);
      },
      handleFileChange(e){
        let files = e.target.files;
         this._dealFileType(files);
      },
      _dealFileType(files){
        let imgExt = ["png", "jpg", "jpeg", "bmp", "gif"];//图片文件的后缀名
        let docExt = ["doc", "docx", "xls", "xlsx"];//word excel文件的后缀名
        let _this = this;
        for (let i = 0; i < files.length; i++) {
          _File.uploadFile(files[i]).then(data=>{
            _File._dealFileType(files[i]).then((file)=>{
              if (imgExt.indexOf(file.type) > -1) {
                let msgType ='RC:ImgMsg';
                _this.sendMessageContent(data.thumburl,msgType,null,null,data.url);
              }
              if (docExt.indexOf(file.type) > -1){
                data.name = files[i].name;
                let msgType ='RC:FileMsg';
                _this.sendMessageContent(data.url,msgType,file.name,file.size);

              }
            })
          });
        }

      },
      selectEmoji(item){
        console.log(item)

        $("#areaInput").append(item.symbol)
        let el = document.getElementById('areaInput');
       // this.$util.getFocus($,el);
      },
      showEmoji(){
        this.$refs.emoji.emojiFlag = true;
      },
      sendPastePic(){
        _File.uploadFile(this.pasteFile).then(data=>{
          let type ='RC:ImgMsg';
          this.pasteFile = '';
          this.dialogVisible = false;
          this.sendMessageContent(data.thumburl,type,null,null,data.url);
        })
      },
      dragenter (el) {
        el.stopPropagation();
        el.preventDefault();
      },
      dragover (el) {
        el.stopPropagation();
        el.preventDefault();
      },
      drop (el) {
        el.stopPropagation();
        el.preventDefault();
        let files = el.dataTransfer.files;
        if(files.length >0){
          this._dealFileType(files)
        }

      },
      clickImg (item) {
        this.showImg = true;
        // 获取当前图片地址
        this.imgSrc = item.content.imageUri;
      },
      viewImg () {
        this.showImg = false;
      },
      _pasteInit(){
        let _this = this;
        document.getElementById('areaInput').addEventListener('paste', function (e) {
          e.preventDefault();
          console.log(e)
          // 添加到事件对象中的访问系统剪贴板的接口
          let clipboardData = e.clipboardData;
          _File.dealPasteData(clipboardData).then((data) => {
            if(data.type==='file'){
              _this.modalImg = data.url;
              _this.pasteFile = data.file;
              _this.dialogVisible = true;
            }else if(data.type==='str'){
              console.log($("#areaInput").html());
              let html =$("#areaInput").html()+data.str;
              $("#areaInput").append(data.str)
            }

          })
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" type="text/scss">
    ::-webkit-scrollbar {
        width: 2px;
        height: 10px;
    }
    .content {
        border: 1px solid blue;
        box-sizing: border-box;
        min-width:524px;
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        .content-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            width: 100%;
            box-sizing: border-box;
            .chat-title {
                width: 100%;
                height: 88px;
                padding: 5px ;
                box-sizing: border-box;
                border-bottom: 1px solid #C7C4C4;
                .chat-name {
                    width: 100%;
                    height: 100%;
                    p {
                        text-align: left;
                    }
                    p:nth-child(1) {
                        font-size: 14px;
                        color: #3C3C3C;
                        line-height: 34px;
                        font-weight: bolder;
                    }

                }
            }
            .chat-content {
                width: 100%;
                flex: 1;
                overflow: auto;
                padding: 10px;
                box-sizing: border-box;
                .more {
                    text-align: center;
                    display: block;
                    height: 24px;
                    line-height: 24px;
                    span {
                        cursor: pointer;
                        color: #3F96F5;
                    }
                }
                .item {
                    width: 100%;
                    overflow: hidden;
                    .send-time {
                        font-size: 12px;
                        color: #999999;
                        text-align: center;
                        line-height: 24px;
                    }
                    .chat-item {
                        width: 400px;
                        height: auto;
                        display: block;
                        .chat-pic {
                            width: 40px;
                            height: 40px;
                            float: left;
                            margin-right: 15px;
                            img {
                                display: inline-block;
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .chat-detail {
                            float: left;
                            margin-bottom: 20px;
                            cursor: pointer;
                            .chat-inquiry{
                                border: 1px solid #C9C9C9;
                                width: 280px;
                                float: right;
                                .inquiry-infor{
                                    width: 100%;
                                    height: auto;
                                    background: #FFFFFF;
                                    overflow: hidden;
                                    .inquiry-infor-left{
                                        float: right;
                                        width: 40px;
                                        margin-top: 10px;
                                        padding-right: 20px;
                                    }
                                    .inquiry-infor-right{
                                        float: left;
                                        width: 210px;
                                        height: auto;
                                        text-align: left;
                                        padding-left: 20px;
                                        box-sizing: border-box;
                                        .title{
                                            height: 20px;
                                            line-height: 20px;
                                            font-size: 14px;
                                            margin-top: 10px;
                                            font-weight: bolder;
                                            color: #000000;
                                        }
                                        .subTitle{
                                            height: 20px;
                                            line-height: 20px;
                                            font-size: 12px;
                                            color: #000000;
                                            margin-bottom: 10px;
                                        }
                                        .car-type{
                                            line-height: 20px;
                                            font-size: 12px;
                                            padding-right: 20px;
                                            box-sizing: border-box;
                                        }
                                    }
                                }
                                .operate-inquiry{
                                    width: 100%;
                                    height: 40px;
                                    background: #e7f4fd;
                                    text-align: center;
                                    line-height: 40px;
                                    font-size: 14px;
                                    position: relative;
                                }
                            }
                            .chat-name {
                                width: 300px;
                                height: 24px;
                                line-height: 24px;
                                font-size: 12px;
                                text-align: left;
                                color: #7F7E7E;
                            }
                            .detail {
                                display: inline-block;
                                min-width: 10px;
                                padding: 5px;
                                box-sizing: border-box;
                                background: #FFFFFF;
                                border: 1px solid #C9C9C9;
                                border-radius: 5px;
                                text-align: left;
                                line-height: 22px;
                                float: left;
                                word-wrap:break-word;

                            }
                            .chat-pic {
                                width: 140px;
                                height: 167px;
                                .pic {
                                    width: 140px;
                                    height: 167px;
                                }
                            }
                            .el-icon-warning {
                                color: red;
                                font-size: 18px;
                                margin-top: 5px;
                                margin-left: 5px;
                                float: left;

                            }
                            .el-icon-loading {
                                font-size: 18px;
                                float: left;
                                margin-top: 5px;

                            }
                            .chat-file {
                                border: 1px solid #C9C9C9;
                                padding: 5px;
                                width: 280px;
                                height: 60px;
                                box-sizing: border-box;
                                border-radius: 5px;
                                float: left;
                                .file-icon {
                                    width: 48px;
                                    height: 48px;
                                    background: #7CD519;
                                    color: #FFFFFF;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    font-size: 20px;
                                    float: left;
                                    margin-right: 10px;
                                }
                                .file-name {
                                    float: right;
                                    line-height: 24px;
                                    text-align: left;
                                    font-size: 12px;
                                    width: 210px;
                                }
                            }

                        }
                    }
                    .chat-item-right {
                        width: 80%;
                        height: auto;
                        display: block;
                        float: right;
                        .chat-pic {
                            width: 40px;
                            height: 40px;
                            float: right;
                            margin-left: 15px;
                            img {
                                display: inline-block;
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .chat-detail {
                            float: right;
                            margin-bottom: 20px;
                            cursor: pointer;
                            .el-icon-warning {
                                color: red;
                                font-size: 18px;
                                margin-top: 5px;
                                margin-right: 5px;
                                float: right;
                            }
                            .el-icon-loading {
                                font-size: 18px;
                                margin-top: 5px;
                                float: right;
                            }
                            .chat-name {
                                height: 24px;
                                line-height: 24px;
                                font-size: 12px;
                                text-align: right;
                                color: #7F7E7E;
                            }
                            .detail {
                                padding: 5px;
                                display: inline-block;
                                box-sizing: border-box;
                                float: right;
                                height: auto;
                                border: 1px solid #C9C9C9;
                                border-radius: 5px;
                                text-align: left;
                                line-height: 22px;
                                background: #F3F0F0;
                                word-wrap:break-word;
                            }
                            .chat-pic {
                                width: 140px;
                                height: 167px;
                                .pic {
                                    width: 140px;
                                    height: 167px;
                                }
                            }
                            .chat-file {
                                border: 1px solid #C9C9C9;
                                padding: 5px;
                                width: 280px;
                                height: 60px;
                                float: right;
                                border-radius: 5px;
                                box-sizing: border-box;
                                margin-left: 10px;
                                .file-icon {
                                    width: 48px;
                                    height: 48px;
                                    background: #7CD519;
                                    color: #FFFFFF;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    font-size: 20px;
                                    float: right;
                                    margin-left: 10px;
                                }
                                .file-name {
                                    float: right;
                                    line-height: 24px;
                                    text-align: left;
                                    font-size: 12px;
                                    width: 210px;
                                }
                            }
                            .chat-inquiry{
                                border: 1px solid #C9C9C9;
                                width: 280px;
                                float: right;
                                .inquiry-infor{
                                    width: 100%;
                                    height: auto;
                                    background: #FFFFFF;
                                    overflow: hidden;
                                    .inquiry-infor-left{
                                        float: left;
                                        width: 40px;
                                        margin-top: 10px;
                                       padding-left: 20px;
                                    }
                                    .inquiry-infor-right{
                                        float: right;
                                        width: 210px;
                                        height: auto;
                                        text-align: left;
                                        .title{
                                            height: 20px;
                                            line-height: 20px;
                                            font-size: 14px;
                                            margin-top: 10px;
                                            font-weight: bolder;
                                            color: #000000;
                                        }
                                        .subTitle{
                                            height: 20px;
                                            line-height: 20px;
                                            font-size: 12px;
                                            color: #000000;
                                            margin-bottom: 10px;
                                        }
                                        .car-type{
                                            line-height: 20px;
                                            font-size: 12px;
                                            padding-right: 20px;
                                            box-sizing: border-box;
                                        }
                                    }
                                }
                                .operate-inquiry{
                                    width: 100%;
                                    height: 40px;
                                    background: #e7f4fd;
                                    text-align: center;
                                    line-height: 40px;
                                    font-size: 14px;
                                }
                            }

                        }
                    }
                }

            }
        }

        .operate {
            height: 40px;
            width: 100%;
            border-top: 1px solid #C7C4C4;
            border-right: 1px solid #C7C4C4;
            box-sizing: border-box;
            position: relative;
            .left {
                width: 40%;
                height: 40px;
                padding: 10px 0 10px 10px;
                box-sizing: border-box;
                text-align: left;
                cursor: pointer;
                float: left;
                position: relative;
                .file{
                    position: absolute;
                    left: 60px;
                    top:0;
                    width: 30px;
                    opacity: 0;
                    height: 100%;
                    cursor: pointer;
                    z-index: 1;
                }
                .emoij{
                    margin-left: 10px;
                    cursor: pointer;
                    margin-right: 20px;
                }
                .uploadImg{
                    margin-bottom: 4px;
                }
                input{
                    cursor: pointer;
                }
            }
            .right {
                height: 40px;
                padding: 0 10px;
                width: 60%;
                text-align: right;
                box-sizing: border-box;
                float: right;
                .key-infor{
                    line-height: 40px;
                    height: 40px;

                }
            }
        }
        .send-message {
            width: 100%;

            position: relative;
            .input {
                box-sizing: border-box;
                width: 100%;
                height: 260px;
                overflow-y: scroll;
                padding-top: 10px;
                border-left: none;
                text-align: left;
                border-top:  1px solid #C7C4C4;;
                outline: none;
                font-size: 14px;
                padding-left: 10px;
                padding-bottom: 20px;
                font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
                white-space: pre-wrap;
                span{
                    float: left;
                }
                .pic{
                    width: 140px;
                    height: 140px;
                    cursor: pointer;
                    margin-bottom: 10px;
                    margin-right: 10px;
                }
                .file{
                    margin-bottom: 10px;
                    border: 1px solid #C9C9C9;
                    padding: 5px;
                    width: 270px;
                    height: 60px;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    border-radius: 5px;
                    position: relative;
                    .file-input{
                        position: absolute;
                        width: 270px;
                        height: 60px;
                        opacity: 0;
                        left: 0;
                        top:0;
                    }
                    .file-left {
                        width: 48px;
                        height: 48px;
                        background: #7CD519;
                        color: #FFFFFF;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 20px;
                        float: left;
                        margin-right: 10px;

                    }
                    .file-right{
                        float: right;
                        width:200px;
                        text-align: left;
                        .file-name{
                            height: 24px;
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space: nowrap;
                            line-height: 24px;
                        }
                        .file-size {
                            float: right;
                            line-height: 24px;

                            font-size: 12px;
                            width: 100%;
                        }
                    }

                }
            }
            .send {
                display: block;
                position: absolute;
                width: 80px;
                height: 30px;
                right: 30px;
                bottom: 10px;
                text-align: center;
                line-height: 32px;
                border: 1px solid #C7C4C4;
                cursor: pointer;
                color: #666;
                font-size: 14px;
                border-radius: 5px;
            }
            .send:hover {
                background: rgb(18, 150, 17);
                color: #FFFFFF;
                border: none;
            }
            .blank-message {
                display: block;
                height: 20px;
                line-height: 20px;
                position: absolute;
                right: 20px;
                bottom: 55px;
                padding: 5px;
                border: 1px solid #C7C4C4;
                border-radius: 5px;
                cursor: pointer;
                .el-icon-caret-bottom {
                    position: absolute;
                    right: 20px;
                    bottom: -15px;
                    font-size: 24px;
                }
            }
        }
        .modal-img{
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: 50%;
                height: 100%;
                display: block;
            }
        }
        .drop-file{
            display: flex;
            align-items: center;
            justify-content: center;
            .file{
                margin-bottom: 10px;
                border: 1px solid #C9C9C9;
                padding: 5px;
                width: 270px;
                height: 60px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border-radius: 5px;
                position: relative;
                .file-left {
                    width: 48px;
                    height: 48px;
                    background: #7CD519;
                    color: #FFFFFF;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                    float: left;
                    margin-right: 10px;

                }
                .file-right{
                    float: right;
                    width:200px;
                    text-align: left;
                    .file-name{
                        height: 24px;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                        line-height: 24px;
                    }
                    .file-size {
                        float: right;
                        line-height: 24px;

                        font-size: 12px;
                        width: 100%;
                    }
                }
            }
        }


    }
</style>
